@import "../../../assets/style/var.scss";

.choose {
    display: flex;
    align-items: center;
    justify-content: center;

    &_box {
        width: 900px;
        padding: 0 20px;
        box-sizing: border-box;
        background: white;
        border: $border-width-base $border-style-base $border-color-base;

        .box_title {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100px;
            border-bottom: $border-width-base $border-style-base $border-color-base;
        }

        .box_content {
            table {
                width: 100%;

                thead {
                    tr {
                        th {
                            height: 70px;
                        }
                    }
                }

                tbody {
                    tr {
                        td {
                            height: 50px;

                            .i-icon {
                                display: none;
                            }

                            .check {
                                &-enter {
                                    display: inline-block;
                                    transform: scale(0.2);
                                }

                                &-enter-active {
                                    display: inline-block;
                                    transform: scale(1);
                                    transition: transform 1s ease-in;
                                }

                                &-enter-done {
                                    display: inline-block;
                                }
                            }
                        }

                        &:not(:last-child) {
                            position: relative;

                            &:after {
                                position: absolute;
                                bottom: 0;
                                left: 0;
                                width: 100%;
                                content: "";
                                height: $border-width-base;
                                background: $border-color-base;
                            }
                        }
                    }
                }
            }
        }

        .box_footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            height: 100px;
            border-top: $border-width-base $border-style-base $border-color-base;
        }

    }

    &_link{
        position: fixed;
        bottom:0;
        left:0;
        width:100%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        .link_item{
            display: flex;
            align-items: center;
            em{
                margin-right: 40px;
            }
            a{
                margin-left: 10px;
                color:#333;
                text-decoration: underline;
            }
            &:not(:first-child){
                margin-left: 20px;
            }
        }
    }

    &--mobile {
        display: block;

        .choose_box {
            width: 100%;
            padding: 10px;
            border: none;

            .box_content {}

            .box_footer{
                border:none;
                height: 0;
                .footer_submit{
                    position: fixed;
                    bottom:0;
                    left:0;
                    width:100%;
                    box-sizing: border-box;
                    padding: 20px 10px;
                    background: white;
                }
            }
        }
    }
}